<template>
  <div class="pagination">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :pager-count="5"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
const currentPage = defineModel<number>('page', { default: 1 })
const pageSize = defineModel<number>('pagesize', { default: 10 })

withDefaults(defineProps<{ total?: number }>(), {
  total: 0
})

const emits = defineEmits<{ pagination: [page: number, pageSize: number] }>()

const handleSizeChange = (size: number) => {
  emits('pagination', currentPage.value, size)
}

const handleCurrentChange = (page: number) => {
  emits('pagination', page, pageSize.value)
}
</script>

<style scoped>
.pagination {
  padding: 16px 0 0 12px;
}
</style>
